<template>
    <div style="display: flex;flex-direction: column;">
        <div class="header">
            <el-button type="primary" @click="addBoard">添加</el-button>
        </div>
        <div class="content">
            <div class="fun">
                <el-tabs :tab-position="tabPosition" style="width: 100%;">
                    <el-tab-pane label="用户管理">用户管理</el-tab-pane>
                    <el-tab-pane label="配置管理">配置管理</el-tab-pane>
                    <el-tab-pane label="角色管理">角色管理</el-tab-pane>
                    <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
                </el-tabs>
            </div>
            <div class="left">
                <div class="tool-item" draggable="true" @mousedown="handleMouse('rect')"
                    @click="handleClickDom('rect')">
                    <i class="el-icon-picture-outline"></i>
                    <span>矩形</span>
                </div>
                <div class="tool-item" draggable="true">
                    <i class="el-icon-refresh"></i>
                    <span>圆形</span>
                </div>
                <div class="tool-item" draggable="true">
                    <i class="el-icon-caret-top"></i>
                    <span>三角形</span>
                </div>
                <div class="tool-item" draggable="true">
                    <i class="el-icon-star-on"></i>
                    <span>星形</span>
                </div>
            </div>
            <div id="center">
                <div id="canvas"></div>
            </div>
            <div class="right">
                <div class="thumbnails-title">缩略图导航</div>
                <div class="thumbnails-container">

                </div>
            </div>
        </div>
    </div>
</template>


<script>
import KonvaJs from './utills/konva'
export default {
    name: "studyPage",
    data() {
        return {
            tabPosition: 'left',
            konva: new KonvaJs('canvas', 'center'),
            cType: ''
        }
    },
    mounted() {
        this.init()
    },
    methods: {
        init() {
            this.konva.init()
            this.listenerStageEvents()
        },
        addBoard() {
            this.konva.drawBoard()
        },
        listenerStageEvents() {
            const { stage } = this.konva
            if (!stage) return
            const container = stage.container()

            stage.on('mousedown', (e) => {
                const dom = e.target
                console.log(dom.value);

            })
            stage.on('click tap', (e) => {
                console.log(e);

            })

            container.addEventListener('dragover', (e) => {
                e.preventDefault()
            })

            container.addEventListener('drop', (e) => {
                e.preventDefault()
                stage.setPointersPositions(e)

                const shape = this.konva.drawShapes(this.cType, stage.getRelativePointerPosition())
                if (!shape) return

            })


        },
        handleMouse(type) {
            this.cType = type
        },
        handleClickDom(type) {
            const { stage } = this.konva
            console.log(stage);
            
            // const { width, height } = stage.attrs
            const width = stage.attrs.width / 2;
            const height = stage.attrs.height / 2;
            // console.log(width, height);

            if (!stage) return
            // stage.setPointersPositions(e)

            const shape = this.konva.drawShapes(type, { x: width, y: height })
            if (!shape) return
        }
    }
}
</script>

<style lang="scss" scoped>
.header {
    height: 50px;
}

.content {
    display: flex;

    .fun {
        width: 80px;
        background-color: #f5f7fa;
        // padding: 10px 0;
        border: 1px solid red;

        .tool-title {
            text-align: center;
            font-weight: bold;
            font-size: 14px;
            margin-bottom: 15px;
        }

        .tool-items {
            display: flex;
            flex-direction: column;
            gap: 15px;

            .tool-item {
                display: flex;
                flex-direction: column;
                align-items: center;
                cursor: grab;
                padding: 8px 0;

                &:hover {
                    background-color: #e8f4ff;
                }

                i {
                    font-size: 20px;
                    margin-bottom: 5px;
                    color: #409EFF;
                }

                span {
                    font-size: 12px;
                }
            }
        }
    }

    .left {
        width: 200px;

        .tool-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            cursor: grab;
            padding: 10px 0;
            margin-bottom: 10px;

            &:hover {
                background-color: #e8f4ff;
            }

            i {
                font-size: 20px;
                margin-bottom: 5px;
                color: #409EFF;
            }

            span {
                font-size: 12px;
            }
        }
    }

    .right {
        width: 200px;
        padding: 10px;

        .thumbnails-title {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 15px;
            text-align: center;
        }

        .thumbnails-container {
            display: flex;
            flex-direction: column;
            gap: 10px;

            .thumbnail-item {
                display: flex;
                align-items: center;
                cursor: pointer;
                padding: 8px;
                border: 1px solid #ddd;
                border-radius: 4px;
                transition: all 0.3s;

                &:hover {
                    background-color: #f5f5f5;
                }

                &.active {
                    border-color: #409EFF;
                    background-color: rgba(64, 158, 255, 0.1);
                }

                .thumbnail-number {
                    width: 24px;
                    height: 24px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border-radius: 50%;
                    background-color: #409EFF;
                    color: white;
                    font-size: 14px;
                    margin-right: 8px;
                }

                .thumbnail-preview {
                    width: 120px;
                    height: 60px;
                    background-color: white;
                    border: 1px solid #ddd;
                }
            }
        }
    }

    #center {
        flex: 1;
        height: 850px;
        border: 2px solid #ddd;
        overflow-y: auto;
        position: relative;
        margin-bottom: 20px;
        background-color: #cdcdcd;

        #canvas {
            width: 100%;
            height: 100%;
        }
    }
}

.demo-tabs>.el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}
</style>